<template>
  <div class="app-container">  
    <el-form :inline="true" :model="listQuery" class="demo-form-inline">
      <i class="el-icon-search btn-search" @click="handleShowSearch()"></i>
      <div v-show="showbtns==true" class="search-lf">
         <el-form-item label="子团队名称">
        <el-input v-model="listQuery.teamName" placeholder="子团队名称"></el-input>
      </el-form-item>

      <el-form-item label="子团队负责人">
        <el-input v-model="listQuery.charge" placeholder="子团队负责人"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" plain @click="getData()">查询</el-button>
        
      </el-form-item>
      </div>
     
      <div class="btn-box">
          <el-button type="primary" @click="handleaddteamNames()">添加子团队</el-button>
      </div>
    </el-form>
    <el-table
      v-loading="listLoading"  border
 height='650px'
      :data="list"
      fit
       highlight-current-row
      style="width: 100%"
    >
      <el-table-column align="center" width='60px' label="序号">
        <template slot-scope="scope">
          <span>{{scope.$index+1 }}</span>
        </template>
      </el-table-column>
     

      <el-table-column align="center" label="子团队名称">
        <template slot-scope="{row}">
          <span>{{ row.teamName }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="子团队负责人">
        <template slot-scope="{row}">
          <span>{{ row.charge }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="280">
        <template slot-scope="{row}">
          <el-button
            type="primary"
            @click="handleEdit(row)"
            size="mini"
            :disabled="editDisabled==true"
            icon="el-icon-edit"
          >编辑</el-button>
          <el-button
            @click="handleLZ(row)"
            class="mg-l"
            type="warning"
            size="mini"
            icon="el-icon-s-ticket"
          >流转</el-button>
          <el-button
            @click="handleDel(row.id)"
            class="mg-l"
            type="danger"
            size="mini"
            icon="el-icon-delete"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog @close='handleClose' :visible.sync="dialogVisible" :title="dialogType==='edit'?'编辑子团队':'添加子团队'">
      <el-form label-width="180px" label-position="right">
        <el-form-item label="子团队名称">
          <el-input  v-model="teamNameList.teamName" placeholder="请输入子团队名称"  />
        
        </el-form-item>
      
        <el-form-item label="子团队负责人">
          <el-input v-model="teamNameList.charge" placeholder="请输入子团队负责人" />
        </el-form-item>
      </el-form>
      <div style="text-align:right;">
         <el-button type="primary" @click="confirmRole">确定</el-button>
       <el-button type="danger" class="cancel_border" plain  @click="dialogVisible=false">取消</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="dialogVisibleteamName" title="团队流转">
      <el-form label-width="180px" label-position="right">
        <el-form-item label="子团队">
          <el-input disabled v-model="teamNameList.teamName" />
          <!-- <el-select filterable
           disabled
            v-model="teamNameList.teamName"
            @change="handleChangePro3($event)"
            placeholder="请选择ddd"
          >
            <el-option
              v-for="item in list"
              :key="item.provinceId"
              :label="item.teamName"
              :value="item.teamName"
            ></el-option>
          </el-select>-->
        </el-form-item>
        <el-form-item label="隶属客户成功">
          <el-select filterable v-model="teamNameList.parentId" placeholder="请选择">
            <el-option
              v-for="item in teamNamesAll"
              :key="item.id"
              :label="item.teamName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="子团队负责人">
          <el-input v-model="teamNameList.charge" placeholder="请输入子团队负责人" />
        </el-form-item>
      </el-form>
      <div style="text-align:right;">
         <el-button type="primary" @click="confirmRole">确定</el-button>
       <el-button type="danger" class="cancel_border" plain  @click="dialogVisibleteamName=false">取消</el-button>
      </div>
    </el-dialog>
    <pagination
      v-show="total>=20"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import {
  getteamNames,
  addteamNames,
  teamNamesProvince,
  updateteamNames,
  getteamNamesAll,
  delteamNames,
} from "@/api/region";
import { getProvinces } from "@/api/supplier";
import { Message } from "element-ui";
import Pagination from "@/components/Pagination"; // Secondary package based on el-pagination

export default {
  name: "getteamNames",
  components: { Pagination },

  data() {
    return {
      showbtns: false,
      list: [],
      editDisabled: false,

      downloadLoading: false,
      total: 0,
      provinceList: [],
      teamNamesAll: [], //所有战区
      listLoading: true,
      listQuery: {
        access_token: sessionStorage.getItem("token"),
        page: 1,
         pageSize: 20,
      },
      teamNameId: "",
      teamNameList: {
        teamName: "",
      },
      dialogVisibleteamName: false,
      dialogVisible: false,
      dialogType: "new",

      ids: "",
    };
  },
  created() {
    this.teamNameId = this.$route.query.id;

    this.getList();
    this.getData();
  },

 methods: {
      handleClose(){
      this.editDisabled = false;
    },
    handleShowSearch() {
      this.showbtns = !this.showbtns;
    },
    handleLZ(row) {
      this.dialogVisibleteamName = true;
      this.teamNameList.id = this.teamNameId;
      this.teamNameList = row;
      this.teamNameList.provinceId = row.provinceId;
      // this.dialogVisible = true;
    },
    handleChangePro3(id) {
       
      let obj = {};
      obj = this.provinceList.find((item) => {
        return item.province === id;
      });

      this.teamNameList.provinceId = obj.provinceId;
      
    },
    getData() {
      // getProvinces().then((res) => {
      //   this.provinceList = res.data.data;
      // });
      getteamNamesAll().then((res) => {
        this.teamNamesAll = res.data.data;
       console.log('ahhahh')
      });
    },
       getList() {
       this.editDisabled = false;
      this.listLoading = true;
      // getteamNames(this.listQuery)
      //   .then((response) => {
      //     this.list = response.data.data.rows;
      //     this.total = response.data.data.total;
      //     this.listLoading = false;
      //   })
      teamNamesProvince(this.teamNameId)
        .then((res) => {
          this.list = res.data.data;
          // this.total = res.data.data.total;
          this.listLoading = false;
        })
        .catch(() => {
          this.listLoading = false;
        });
    },
    handleDel(id) {
      this.$confirm("确定删除该子团队么?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "error",
      })
        .then(() => {
          delteamNames(id).then((res) => {
            if (res.data.code == "200") {
              this.$message.success(res.data.message);
              this.getList();
            } else {
              this.$message.error(res.data.message);
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    handleaddteamNames(row) {
      //this.role = Object.assign({}, defaultRole);

      this.dialogType = "new";
      this.dialogVisible = true;

      this.teamNameList = {};
      this.teamNameList.parentId = this.teamNameId;
    },
    handleEdit(row) {
      this.editDisabled = true;
      this.dialogType = "edit";
      this.dialogVisible = true;
      // this.teamNameList.id=this.teamNameId;
      this.teamNameList = row;
      teamNamesProvince(row.id).then((res) => {
        console.log(res);
      });
      this.teamNameList.parentId = this.teamNameId;
    },
    confirmRole(id) {
      const isEdit = this.dialogType === "edit";

      if (isEdit || this.dialogVisibleteamName) {
        updateteamNames(this.teamNameList).then((res) => {
          if (res.data.code == "200") {
            this.$message.success(res.data.message);
            this.dialogVisible = false;
            this.dialogVisibleteamName = false;
            this.getList();
            this.editDisabled = false;
          } else {
            this.$message.error(res.data.message);
          }
        });
        return false;
      }

      let _this = this;
      addteamNames(this.teamNameList).then((res) => {
       
        if ((res.code = "200")) {
          this.$message.success(res.data.message);

          _this.dialogVisible = false;

          _this.getList();
        }
      });
    },
  },
};
</script>

<style scoped>
.edit-input {
  padding-right: 100px;
}
.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}
</style>
